<template>
    <ul class="c-course">
        <router-link to="/detail">
            <li v-for="item in arrayList" :key="item.index">
                <img :src = "item.imgUrl" >
                <h1>{{item.title}}</h1>
                <p>{{item.msg}}</p>
            </li>
        </router-link>
    </ul>
</template>
<script>
export default {
    props:{ // 从父组件接收参数
        arrayList: Array
    }
}
</script>
<style scoped>
    .c-course {
        padding: 24px 0px;
        background: #fff;
    }
    .c-course li{   
        position: relative;
        width: 335px;
		height: 72px;
		margin : 0 auto 24px;
    }
    .c-course li img{
        position: absolute;
		width: 108px;
		border-radius: 5px;
    }
    .c-course li h1{
        font-size: 15px;
		padding-left: 124px;
		color: #2B333B;
    }
    .c-course li p{
        font-size: 12px;
		padding: 8px 0 0 124px;
		color: #71777D;
    }
</style>
















